<script setup>
import {defineEmits, getCurrentInstance, onMounted, reactive, ref, watch} from "vue";
import SearchInput from "@/components/debris/SearchInput.vue";
import {formPage, searchModuleNames, deleteFormById, moduleTypes} from "@/api/basal.js";
import {ResultEnums} from "@/enums/ResultStatusEnums.js";
import Pagination from "@/components/debris/Pagination.vue";
import Dialog from "@/components/debris/Dialog.vue";
const {proxy} = getCurrentInstance();
const emit = defineEmits(['innerLink'])
const query = reactive({pageNo:1,pageSize:10,createSystemCode:import.meta.env.VITE_SYSTEM_CODE,moduleName:''})
const total = ref(0)
const rows = ref([])
const moduleNames = ref([])
const moduleTypeDict = reactive({})
onMounted(() => {
  searchModuleTypes();
  querySignboard(query.createSystemCode).then(data => {
    moduleNames.value = data
    query.moduleName = data[0]
  })
})

watch(query,(newParams) => {
  onLoadData(newParams)
})

function onLoadData(param){
  formPage(param).then(result => {
    if(result.code === ResultEnums.SUCCESS ){
      let data = result.data
      total.value = data.total
      rows.value = data.records
    }
  })
}

async function searchModuleTypes(){
  const result = await moduleTypes();
  if(result.code === ResultEnums.SUCCESS ){
    const data = result.data
    for(const index in data){
      moduleTypeDict[data[index].key] = data[index].value
    }
  }
}

async function querySignboard(systemCode){
  const result = await searchModuleNames(systemCode);
  return result.code === ResultEnums.SUCCESS?result.data:[]
}

function navLinkActive(signboard,index){
  let moduleName = query.moduleName
  if(!moduleName && index === 0){query.moduleName = signboard}
  return query.moduleName === signboard ? ' active':' ';
}

function navLinkClick(signboard){
  query.pageNo = 1
  query.pageSize = 10
  query.moduleName = signboard
}

function deleteById(systemCode,id){
  deleteFormById(systemCode,id).then(result => {
    if(result.code === ResultEnums.SUCCESS ){
      window.location.reload();
    }
  })
}

function innerLink(e,url,params){
  e.preventDefault();
  emit('innerLink',url,params)
}
</script>

<template>
  <div class="row g-3 mb-4 align-items-center justify-content-between">
    <div class="col-auto" v-if="proxy.$route.meta">
      <h1 class="app-page-title mb-0">{{ proxy.$route.meta.theme }}</h1>
    </div>
    <div class="col-auto">
      <div class="page-utilities">
        <div class="row g-2 justify-content-start justify-content-md-end align-items-center">
          <SearchInput placeholder="请输入字段名称/编码" @QueryParams="(content)=>{query.keyword = content.keyword ; query.createSystemCode=content.systemCode}"/><!--//col-->
        </div><!--//row-->
      </div><!--//table-utilities-->
    </div><!--//col-auto-->
  </div>

  <nav id="orders-table-tab" class="orders-table-tab app-nav-tabs nav shadow-sm flex-column flex-sm-row mb-4" v-if="moduleNames">
    <a class="flex-sm-fill text-sm-center nav-link " :class="navLinkActive(moduleName,index)" v-for="(moduleName,index) in moduleNames"  :id="`${moduleName}-tab`" data-bs-toggle="tab"
       :href="`#${moduleName}`" role="tab" @click="navLinkClick(moduleName)" :aria-controls="moduleName" aria-selected="true">{{ moduleName }}</a>
  </nav>

  <div class="table-responsive">
    <table class="table app-table-hover mb-0 text-left">
      <thead>
      <tr>
        <th class="cell"></th>
        <th class="cell">字段名称</th>
        <th class="cell">字段编码</th>
        <th class="cell">组件类型</th>
        <th class="cell">允许为空</th>
        <th class="cell">列表展示</th>
        <th class="cell">最近操作时间</th>
        <th class="cell">状态</th>
        <th class="cell">排序</th>
        <th class="cell">
          <button type="button" class="btn btn-secondary btn-sm" @click="innerLink($event,`/home/form/edit`,{systemCode:query.createSystemCode})" >新建</button>
        </th>
      </tr>
      </thead>
      <tbody v-if="rows">
      <tr v-for="row in rows">
        <td class="cell">
          <i class="bi " :class="row.menuIcon" v-if="row.menuIcon"></i>
        </td>
        <td class="cell">
          {{row.fieldName}}
        </td>
        <td class="cell">{{row.fieldCode}}</td>
        <td class="cell">
          {{ moduleTypeDict[row.fieldType] || row.fieldType }}
        </td>
        <td class="cell">
          <template v-if="row.allowEmpty">
            <span class='badge bg-warning'>是</span>
          </template>
          <template v-else>
            <span class='badge bg-success'>否</span>
          </template>
        </td>
        <td class="cell">
          <template v-if="row.allowDesign">
            <span class='badge bg-success'>允许</span>
          </template>
          <template v-else>
            <span class='badge bg-warning'>否</span>
          </template>
        </td>
        <td class="cell">
          {{ row.updateTime ? new Date(row.updateTime).toLocaleDateString() : row.updateTime}}
        </td>
        <td class="cell">
          <template v-if="row.isEnable">
            <span class='badge bg-success'>启用</span>
          </template>
          <template v-else>
            <span class='badge bg-warning'>弃用</span>
          </template>
        </td>
        <td class="cell">{{row.sort}}</td>
        <td class="cell">
          <button type="button" class="btn btn-outline-primary btn-sm" @click="innerLink($event,`/home/form/edit`,{id:row.id,systemCode:row.createSystemCode,moduleName:row.moduleName})" >编辑</button>
          <button type="button" class="btn btn-outline-light btn-sm" data-bs-toggle="modal" :data-bs-target="`#dialog-${row.id}`" >删除</button>
          <Dialog theme="菜单删除请求" :content="`您确定删除 “${row.fieldName}” 吗？`" :row="row" @confirm="(r)=>{deleteById(r.createSystemCode,r.id)}"
                  :id="`dialog-${row.id}`" :primary="`${row.id}`"/>
        </td>
      </tr>
      </tbody>
    </table>
  </div><!--//table-responsive-->
  <br/>
  <Pagination :page-size=query.pageSize :total=total :span=2
              @current-change="(num)=>{query.pageNo=num}"/><!--//app-pagination-->
</template>